這次要寫的主題是頁面讀取中的動畫 part 2
這個效果其實很簡單 針對區塊做高度縮放，然後讓縮放效果依區塊先後出現
如截圖這樣的效果

一樣設定好基本架構

<div class="loader-wrapper">
  <span class="loader"></span>
  <span class="loader"></span>
  <span class="loader"></span>
  <span class="loader"></span>
  <span class="loader"></span>
</div>

針對架構放上基本的 css

.loader-wrapper{
  position:absolute;
  top:50%;
  left:50%;
  width:2rem;
  height:6rem;
  background:transparent;
  display:flex;
  /*讓flex內物件置中對齊*/
  align-items:center;
}

.loader:nth-of-type(n+2){
  margin:0 0px 0px 2px;
}

.loader{width:0.4rem;
height:5px;}

這邊設定 flex 是為了讓區塊並列且等高
針對每個區塊依序加背景色

.loader:nth-of-type(1){background:#ffbe4f;}

.loader:nth-of-type(2){background:#6bd2db;
}

.loader:nth-of-type(3){background:#136cc3;}

.loader:nth-of-type(4){background:#e8702a;}


.loader:nth-of-type(5){background:#0ea7b5;} 

就會長這樣 5個小方塊

最後把動畫放進來，這邊要注意的是用 animation-delay 這個屬性來做出先後的效果

.loader:nth-of-type(1){
  animation:height-increasing .8s -.7s linear infinite;
}

.loader:nth-of-type(2){
  animation:height-increasing .8s -.6s linear infinite;
}

.loader:nth-of-type(3){
  animation:height-increasing .8s -.5s linear infinite;
}

.loader:nth-of-type(4){
  animation:height-increasing .8s -.4s linear infinite;
}


.loader:nth-of-type(5){
  animation:height-increasing .8s -.3s linear infinite;
} 

@keyframes height-increasing{
  0%,50%{height:5px;}
  25%{height:6rem;}
}

這樣就完成了
一樣附上本次的codepen
https://codepen.io/UHU/pen/MPQGWO